<script setup lang="ts">
	// --组合式 API 模板
	import { ref } from 'vue'
	import {
		onLoad,
		onShow,
	} from "@dcloudio/uni-app";
	import Util from '@/utils/Util.ts';

	const title = ref("标题")
	const navbarHeight = ref(44)
	const navigateList = ref([])

	const islogin = ref(false)
	const isreq = ref(false)
	const memberInfo = ref({
		member_headimg: '', member_nickname: '',
		member_name: '',
		user_code: '', member_city: ''

	})
	const familyMembers = ref([
		{
			id: '', avatar: '', name: 'xxx'
		},
		{ id: '', avatar: '', name: 'xxx' },
	])
	// onLoad 接受 A 页面传递的参数
	onLoad((option) => {
		console.log("B 页面 onLoad:", option); //B 页面 onLoad: {id: '1', name: 'uniapp'}
		console.log(Util.formatRandom());
	});

	onShow(() => {
		console.log("B 页面 onShow");
		navigateList.value = [{
			text: '家庭支出',
			url: '/sub-user/pages/member/list',
			icon: 'icon-zu1778',
			color: '#2a95c6'
		}, {
			text: '成长历程',
			url: '/sub-user/pages/member/list',
			icon: 'icon-zu1778',
			color: '#2a95c6'
		}]
	});
	const updateMember = () => { }
	// 统一跳转接口，拦截未登录路由
	const to = (url:string) => {
		console.log(url)
		if (!url) {
			Util.msg("该功能暂未开通");
			return;
		}
		console.log(url)
		uni.navigateTo({
			url
		});
	}
</script>
<template>
	<view class="page-container">
		<view class="navbar-bg pos-r w-full" style="z-index: 5;">
			<view style="">
				<image src="@/static/images/bg-main.png" mode="widthFix" class="w-full">
				</image>
			</view>
			<view class="member-area padding-top-sm margin-bottom dflex pos-a  w-full padding-lr-sm"
				style="align-items: flex-start;top:0" :style="{top:navbarHeight+'px'}">
				<view class="headimg border-radius-c" @click="to('/sub-user/pages/setting/personal')">
					<image class="avatar border-radius-c"
						:src="memberInfo.member_headimg || 'https://anmakeover.cn/resources/app-plus/user-default.png'">
					</image>
				</view>
				<view class="dflex-b" style="flex-grow: 1;align-items: flex-start;">
					<view class="margin-left-sm">
						<view class="info-box margin-lr-sm dflex-sc">
							<view v-if="islogin" class="dflex-c" @click="to('/sub-user/pages/setting/personal')">
								<text class="fs-lg line-height-1 ft-white fwb">
									{{ memberInfo.member_nickname || memberInfo.member_name||'匿名用户' }}
								</text>
								<view class=" padding-lr-xs margin-left-sm arrow-right">
									<uni-icons type="right" color="#fff"></uni-icons>
								</view>
							</view>
							<view class="dflex" v-else @click="to('')">
								<text class="fs-lg ft-white fs-28" style="height: 26px;">登录/注册</text>
								<view class=" padding-lr-xs margin-left-sm arrow-right" style="height: 26px;">
									<uni-icons type="right" color="#fff"></uni-icons>
								</view>
							</view>
							<!-- 微信小程序最新版已不再返回 昵称、头像 -->
							<view v-if="islogin " class="margin-lr" @click.stop="updateMember">
								<view :class="{ 'rotate': isreq }" class="animated "
									style="width: 25px;height: 25px;line-height: 25px;">
									<uni-icons type="refreshempty" color="#fff" size="22" />
								</view>
							</view>
						</view>
						<template v-if="islogin">
							<view class="dflex padding-tb-xs wpre-85" style="flex-grow: 1;flex-wrap: wrap;">
								<view class="dflex padding-tb-xxs" style="flex-wrap: wrap;">
									<text
										class="fs-gray fs-label margin-lr-xs fs-xxs ">ID:{{memberInfo.user_code}}</text>
								</view>
							</view>
							<view>
								<text class="fs-xxs">{{ memberInfo.member_city }}</text>
							</view>
						</template>
					</view>
					<view class="padding-lr-sm dflex-e " style="flex-flow: column;align-items: center;">
						<!-- #ifdef MP-WEIXIN -->
						<view class="tar" @click="to('/sub-user/pages/setting/setting')">
							<uni-icons type="gear" size="26" color="#fff" />
						</view>
						<!-- #endif -->
					</view>
				</view>
			</view>

		</view>
		<view class="border-radius bg-main pos-r margin-lr-sm" style="margin-top: -95px;">
			<view class=" padding-lr-sm">
				<view class="padding-lr-sm padding-tb-sm">
					<text class="ft-dark-3 fwbd fs-34">家庭成员</text>
					<text class="fs-22 margin-left-sm">长按可编辑</text>
				</view>
				<view class="stats-area dflex-s bg-main padding-top padding-bottom-sm" style="flex-wrap: wrap;">
					<view class="item dflex dflex-flow-c" v-for="(item,idx) in familyMembers" @click="to(item.id)"
						style="width: 25%;max-width: 25%;min-width: 25%;">
						<text class="iconfont  fs-50" :class="item.avatar"
							style="width: 45px;height: 45px;background-color: #ccc;"></text>
						<text class="ft-dark-3 fs-32">{{item.name}}</text>
					</view>
				</view>
				<view class="dflex-b padding-tb">
					<view class="bg-dark border-radius flex1" style="padding:2.5px 5px 5px 3px">
						<view class="bg-main border-radius tac" style="padding: 5px;">
							<text class="fs-34">添加成员</text>
						</view>
					</view>
					<view style="width: 15vw;" class="dflex-c padding-left-sm">
						<view class="bg-dark border-radius " style="padding:2.5px 5px 5px 3px">
							<view class="bg-main border-radius " style="padding: 5px;">
								<text style="width: 35px;height: 30px;display: block;"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="border-radius margin-top-sm bg-main margin-lr-sm">
			<view class="padding-lr-sm padding-tb-sm">
				<text class="ft-dark-3 fwbd">常用功能</text>
			</view>
			<view class="stats-area dflex-s bg-main padding-bottom-sm padding-top" style="flex-wrap: wrap;">
				<view class="item dflex dflex-flow-c" v-for="(item,idx) in navigateList" @click="to(item.url)"
					style="width: 25%;max-width: 25%;min-width: 25%;">
					<text class="iconfont  fs-50" :class="item.icon" :style="{'color':item. color}"
						style="width: 45px;height: 45px;background-color: #ccc;"></text>
					<text class="ft-dark-3">{{item.text}}</text>
				</view>
			</view>
		</view>
		<view class="uni-divider" style="min-height: 0.5vh;"></view>
		<!-- 广告区 -->
		<view class="padding-lr-sm">
			<view class="border-radius margin-top-sm bg-main">
				<image src="../../static/images/微信图片_20240718162355.png" style="width: 100%;height: 105px;"></image>
			</view>
		</view>
		<use-tabbar></use-tabbar>
	</view>
</template>



<style lang="less" scoped>
	page,
	page-container {
		min-height: 100vh;
		background: #F2F6F9;
	}

	.member-area {
		.headimg {
			width: 100rpx;
			height: 100rpx;
			border: 5rpx solid #fff;

			.avatar {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>